<script lang="ts" setup>
import type { ComponentPublicInstance } from 'vue';

import { onMounted, ref, shallowRef } from 'vue';

import { getTeleport } from '@antv/x6-vue-shape';
import { ElButton, ElMessage } from 'element-plus';

import { useAntvX6Store } from '@/store/operation';

import InitData from './initData.vue';
import Reason from './reason.vue';
import RightPanel from './rightPanel.vue';
import UploadElJson from './uploadElJson.vue';
import { defaultCustomerData, initData } from './data';

const antvX6Store = useAntvX6Store();

const TeleportContainer = shallowRef(null);
onMounted(async () => {
    await antvX6Store.initGraph('#antvX6Contrainer');
    await antvX6Store.initStencil('#antvStencilContrainer');
    const data = {
        nodes: [
            ...initData.nodes,
            ...defaultCustomerData.nodes,
        ],
        models: [
            ...initData.models,
            ...defaultCustomerData.models,
        ]
    }

    await antvX6Store.initNodeData(data);
    TeleportContainer.value = getTeleport();
});


const initDataRef = ref<ComponentPublicInstance<ReasonExport>>();
const openInitData = () => {
    if (initDataRef.value) {
        initDataRef.value.openDialog();
    }
};

const uploadElJsonRef = ref<ComponentPublicInstance<ReasonExport>>();
const openUploadElJson = () => {
    if (uploadElJsonRef.value) {
        uploadElJsonRef.value.openDialog();
    }
};

interface ReasonExport {
    openDialog: () => void;
}

const reasonRef = ref<ComponentPublicInstance<ReasonExport>>();
const openReason = () => {
    if (reasonRef.value) {
        const nodes = antvX6Store.getGraph().getNodes();
        if (nodes && nodes.length > 0) {
            reasonRef.value.openDialog();
        } else {
            ElMessage.error('请先添加节点');
        }
    }
};

const clearNodes = () => {
    antvX6Store.getGraph().clearCells();
}
</script>

<template>
    <div>
        <component :is="TeleportContainer" />
        <div class="info-panel-container">
            <div class="flex">
                <div id="antvStencilContrainer" class="stencilContainer"></div>
                <div class="content">
                    <div id="antvX6Contrainer" class="antvX6Contrainer"></div>
                    <div class="operationContainer">
                        <div class="buttons">
                            <ElButton color="#4d73e6" @click="openInitData"> 初始化Node </ElButton>
                            <ElButton color="#4d73e6" @click="openUploadElJson"> 导入El </ElButton>
                            <ElButton color="#4d73e6" @click="openReason"> 导出EL </ElButton>
                            <ElButton color="#4d73e6" @click="clearNodes"> 清除 </ElButton>
                        </div>
                    </div>
                </div>
            </div>
            <RightPanel />
            <UploadElJson ref="uploadElJsonRef" />
            <InitData ref="initDataRef" />
            <Reason ref="reasonRef" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.flex {
    display: flex;
}

.stencilContainer {
    position: absolute;
    z-index: 1;
    width: 200px;
    height: 100vh;
}

.content {
    flex: 1 1 0%;
    height: 100vh;

    .operationContainer {
        position: relative;
        bottom: 80px;
        left: 55%;
        display: flex;
        width: 500px;
        height: 50px;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        transform: translateX(-50%);
        border-radius: 15px;

        .buttons {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            gap: 10px;
        }
    }
}

.antvX6Contrainer {
    height: 100%;
}

:deep(.info-panel-modal .el-drawer__header) {
    margin-bottom: 0 !important;
}

:deep(.info-panel-modal) {
    position: unset !important;
    // pointer-events: auto;
}

.info-panel-container {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: auto;
}

:deep(.x6-widget-stencil-search-text) {
    font-size: 14px;
}

:deep(.x6-widget-stencil.not-found::after) {
    margin-top: 14px;
}

:deep(.x6-widget-selection-box) {
    border: 2px dashed #239edd;
}

:deep(.x6-widget-selection-inner) {
    border: 1px solid #239edd;
}

:deep(.x6-widget-transform-active-handle) {
    background-color: #3dafe4;
}

:deep(.lite-flow-select .x6-widget-selection-box) {
    display: none !important;
}
</style>
